<script setup lang="ts">
//src\renderer\Component\BarLeft.vue
import { ref, watch } from "vue";
import { useRoute, useRouter, type RouteLocationAsPathGeneric, type RouteLocationAsRelativeGeneric } from "vue-router";
//菜单列表数组
const isSetting = ref(false)
let mainWindowRoutes = ref([
  {
    path: `/WindowMain/Home`,
    name: "首页",
    isSelected: true,
    icon: `icon-editor`,
    iconSelected: `icon-editor`,
  },
  {
    path: `/WindowMain/Memo`,
    name: "记事本",
    isSelected: true,
    icon: `icon-notes`,
    iconSelected: `icon-notes`,
  },
  {
    path: `/WindowMain/Diary`,
    name: "日历本",
    isSelected: true,
    icon: `icon-rili`,
    iconSelected: `icon-rili`,
  },
  {
    path: `/WindowMain/Collect`,
    name: "收藏",
    isSelected: true,
    icon: `icon-shoucang`,
    iconSelected: `icon-shoucang`,
  },
  {
    path: `/WindowMain/QwenPlus`,
    name: "千问Plus",
    isSelected: true,
    icon: `icon-rengongzhineng`,
    iconSelected: `icon-rengongzhineng`,
  },
  {
    path: `/WindowMain/Explain`,
    name: "说明",
    isSelected: false,
    icon: `icon-shuoming`,
    iconSelected: `icon-shuoming`,
  },
]);
let route = useRoute();
let router = useRouter();
//注册路由变化监听器
watch(
  () => route,
  () =>
    mainWindowRoutes.value.forEach(
      (v) => (v.isSelected = v.path === route.path)
    ),
  {
    immediate: true,
    deep: true,
  }
);

const linkToPath = (path: string) => {
  if (path.includes('/Setting')) {
    isSetting.value = true
  } else {
    isSetting.value = false
  }
  router.push(path)
}

</script>

<template>
  <div class="BarLeft">
    <div class="userIcon">
      <!-- <img src="../assets/avatar.jpg" alt="" /> -->
    </div>
    <div class="menu">
      <span v-for="item in mainWindowRoutes" :to="item.path" @click="linkToPath(item.path)"
        :class="[`menuItem iconfont ${item.icon}`, { selected: item.isSelected }]"></span>

      <a-dropdown :trigger="['click']" placement="right" :arrow="{ pointAtCenter: true }">
        <span style="margin-top:auto" :class="[`menuItem iconfont icon-shezhi`, { selected: isSetting }]"
          @click.stop.prevent=""></span>
        <template #overlay>
          <a-menu style="width: 120px;">
            <a-menu-item @click.stop="linkToPath('/WindowMain/Setting/Resource')">
              <div style="cursor: pointer;color: var(--primary-color);font-size: 13px">资源管理</div>
            </a-menu-item>
            <a-menu-item @click.stop="linkToPath('/WindowMain/Setting/Property')">
              <div style="cursor: pointer;color: var(--primary-color);font-size: 13px">设置</div>
            </a-menu-item>
            <a-menu-item @click.stop="linkToPath('/WindowMain/Setting/Conversation')">
              <div style="cursor: pointer;color: var(--primary-color);font-size: 13px">会话管理</div>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

    </div>
  </div>
</template>

<style scoped>
.BarLeft {
  display: flex;
  flex-direction: column;
  width: 60px;
  height: 100%;
  background-color: var(--surface-color);
  border-right: 1px solid var(--border-color);
}

.menu {
  display: flex;
  flex-direction: column;
  width: 60px;
  height: 100%;
  align-items: center;
  padding: 10px 0px;
  gap: 10px;
}

.menuItem {
  color: var(--text-secondary);
  font-size: 32px;
  height: 60px;
  width: 60px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--border-radius);
}

.menuItem:hover {
  background-color: var(--primary-extra-light-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.selected {
  color: var(--primary-color);
  background-color: rgba(74, 144, 226, 0.15);
}
</style>
